.rt-micro-trade-container {
  display: flex;
  flex-direction: column;
  .rt-small-banner-img {
    max-width: 100%;
    display: block;
  }
  .rt-goods-real-time-box {
    display: flex;
    background-color: @color-bg-level-2;
    & > div {
      flex: 1;
      padding: 30px 0;
      display: flex;
      justify-content: center;
      &.-active {
        border-bottom: 4px solid @color-font-level-2;
        .rt-name {
          color: @color-font-level-2;
        }
      }
      .-go-up {
        .rt-price, i {
          color: @color-up;
        }
      }
    }
    .rt-name {
      font-size: 32px;
      color: @color-font-level-1;
    }
    .rt-price {
      font-size: 36px;
      color: @color-down;
      padding: 0 10px 0 20px;
    }
    i {
      color: @color-down;
    }
  }
  .rt-statistics-price-box {
    color: @color-font-level-1;
    font-size: 24px;
    display: flex;
    span {
      flex: 1;
      text-align: center;
      padding: 18px 0;
    }
  }
  .cm-scrollable-container {
    .rt-chart-genre-box {
      color: @color-font-level-1;
      font-size: 24px;
      display: flex;
      background-color: @color-bg-level-2;
      span {
        flex: 1;
        text-align: center;
        padding: 18px 0;
        &.-active {
          color: @color-bg-level-3;
          border-bottom: 2px solid;
        }
      }
    }
    .rt-chart-img {
      max-width: 100%;
      display: block;
    }
    .rt-about-user-account {
      border-top: 2px solid @color-border;
      border-bottom: 2px solid @color-border;
      display: flex;
      justify-content: space-between;
      padding: 20px 24px;
      i {
        font-size: 38px;
      }
      .rt-left {
        display: flex;
        align-items: center;
        .rt-text {
          font-size: 24px;
          color: @color-up;
          padding: 0 12px;
        }
        i {
          color: @color-up;
        }
        .rt-balance {
          font-size: 28px;
          padding-right: 20px;
        }
      }
      .rt-right {
        font-size: 24px;
        color: @color-font-level-1;
        i {
          padding-right: 12px;
        }
        .rt-adjust-sign {
          padding-right: 50px;
        }
      }
    }
    .rt-available-goods {
      display: flex;
      flex-wrap: wrap;
      padding-top: 16px;
      .rt-goods {
        width: 31%;
        margin-left: 1.75%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: @color-font-level-1;
        border-radius: 8px;
        background-color: @color-bg-level-2;
        padding: 16px 0;
        margin-bottom: 16px;
        position: relative;
        &.-active {
          color: @color-bg-level-3;
          border: 2px solid;
          .cm-right-angle-trangle-box {
            position: absolute;
            right: -1px;
            bottom: -1px;
          }
        }
        span {
          font-size: 20px;
        }
        .rt-middle {
          font-size: 32px;
          padding: 10px 0;
        }
      }
    }
    .rt-button-group {
      display: flex;
      padding-bottom: 20px;
      border-bottom: 2px solid @color-border;
      & > div {
        width: 47%;
        margin-left: 2%;
        box-sizing: border-box;
        text-align: center;
        padding: 24px 0;
        border-radius: 8px;
      }
      .rt-up {
        background-color: @color-up;
      }
      .rt-down {
        background-color: @color-down;
      }
      i {
        font-size: 35px;
      }
    }
    .rt-order-title {
      font-size: 24px;
      color: @color-font-level-1;
      border-bottom: 2px solid @color-border;
      background-color: #2B2F38;
      padding: 14px 0 14px 42px;
    }
    .rt-order-box {
      .rt-order {
        display: flex;
        padding: 26px 0;
        background-color: @color-bg-level-2;
        border-bottom: 2px solid @color-border;
        &.-diff {
          .rt-updown span {
            background-color: @color-down;
          }
          .rt-profit-loss span {
            color: @color-up;
          }
          .rt-delta {
            color: @color-down;
          }
        }
        .rt-updown {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            font-size: 24px;
            padding: 14px;
            background-color: @color-up;
            border-radius: 6px;
          }
        }
        .rt-profit-loss {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex: 1;
          span {
            color: @color-font-level-3;
            font-size: 16px;
            padding-top: 6px;
          }
        }
        .rt-info {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          flex: 2;
          font-size: 24px;
          color: @color-font-level-1;
          .rt-name {
            padding-bottom: 12px;
          }
        }
        .rt-delta {
          display: flex;
          justify-content: center;
          align-items: center;
          flex: 2.6;
          font-size: 40px;
          color: @color-up;
        }
        .rt-op-btn {
          flex: 2.8;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            padding: 14px 38px;
            background-color: @color-border;
            border-radius: 6px;
          }
        }
      }
    }
  }
}

.rt-make-position-modal {
  .am-modal-body {
    color: @color-font-level-1;
    display: flex;
    flex-direction: column;
    .rt-info-box {
      border-bottom: 1px solid @color-border;
      display: flex;
      justify-content: space-between;
      padding: 18px 32px;
      & > div {
        display: flex;
        &.-left {
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          .rt-price {
            font-size: 24px;
            padding-top: 8px;
          }
          strong {
            font-size: 44px;
            color: @color-up;
          }
        }
        &.-right {
          font-size: 24px;
          align-items: center;
          & > span {
            color: @color-font;
            padding: 14px;
            background-color: @color-up;
            border-radius: 6px;
          }
          & > div {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            &.-middle-box {
              padding: 0 16px 0 24px;
            }
            .-adjust {
              padding-bottom: 16px;
            }
          }
        }
      }
    }
    .rt-bankroll-box {
      border-bottom: 2px solid @color-border;
      display: flex;
      justify-content: space-between;
      padding: 24px 34px;
      .rt-balance {
        color: @color-up;
        padding-left: 46px;
      }
      .rt-recharge {
        font-size: 24px;
        padding-left: 12px;
      }
    }
    .rt-lots-box {
      border-bottom: 2px solid @color-border;
      display: flex;
      padding: 24px 32px;
      & > span {
        padding-right: 18px;
        padding-top: 4px;
      }
      & > div {
        flex: 1;
        & > div {
          display: flex;
          & > span {
            border: 2px solid @color-border;
            flex: 1;
            padding: 30px 0;
            margin-right: 16px;
            border-radius: 8px;
            background-color: @color-bg-level-2;
            &:last-child {
              margin-right: 0;
            }
            &.-active {
              color: @color-bg-level-3;
              border: 2px solid;
              position: relative;
              .cm-right-angle-trangle-box {
                position: absolute;
                right: -1px;
                bottom: -1px;
              }
            }
          }
        }
      }
      .-top {
        & > span {
          margin-bottom: 16px;
        }
      }
    }
    .rt-stepper-box {
      border-bottom: 2px solid @color-border;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 34px;
      padding-bottom: 14px;
      .-percent {
        padding-left: 16px;
      }
    }
    .rt-switch-box {
      border-bottom: 2px solid @color-border;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px;
      .-l-ps {
        padding-left: 4px;
        font-size: 24px;
      }
      .-r-ps {
        padding-right: 16px;
        font-size: 24px;
      }
    }
    .rt-op-btn {
      font-size: 36px;
      color: @color-font;
      padding: 28px 0;
      background-color: @color-up;
    }
  }
}